<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="t/css/style.css"/>
</head>
<body>
        <div class="catbox">
        <table id="cartTable">
            <thead>
            <tr>
                <th><label>
                    <input class="check-all check" type="checkbox"/>&nbsp;&nbsp;全选</label></th>
                <th>商品</th>
                <th>单价</th>
                <th>数量</th>
                <th>小计</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr class="tr1">
                <td class="checkbox"><input class="check-one check" type="checkbox"/></td>
                <td class="goods"><img src="t/images/images/1.jpg" alt=""/><span>Casio/卡西欧 EX-TR350</span></td>
                <td class="price">5999.88</td>
                <td class="count"><span class="reduce">-</span>
                    <input class="count-input" type="text" value="1"/>
                    <span class="add">+</span></td>
                <td class="subtotal">5999.88</td>
                <td class="operation"><span class="delete">删除</span></td>
            </tr>
            <tr class="tr1">
                <td class="checkbox"><input class="check-one check" type="checkbox"/></td>
                <td class="goods"><img src="t/images/images/2.jpg" alt=""/><span>Canon/佳能 PowerShot SX50 HS</span></td>
                <td class="price">3888.50</td>
                <td class="count"><span class="reduce">-</span>
                    <input class="count-input" type="text" value="1"/>
                    <span class="add">+</span></td>
                <td class="subtotal">3888.50</td>
                <td class="operation"><span class="delete">删除</span></td>
            </tr>
            <tr class="tr1">
                <td class="checkbox"><input class="check-one check" type="checkbox"/></td>
                <td class="goods"><img src="t/images/images/3.jpg" alt=""/><span>Sony/索尼 DSC-WX300</span></td>
                <td class="price">1428.50</td>
                <td class="count"><span class="reduce">-</span>
                    <input class="count-input" type="text" value="1"/>
                    <span class="add">+</span></td>
                <td class="subtotal">1428.50</td>
                <td class="operation"><span class="delete">删除</span></td>
            </tr>
            <tr class="tr1">
                <td class="checkbox"><input class="check-one check" type="checkbox"/></td>
                <td class="goods"><img src="t/images/images/4.jpg" alt=""/><span>Fujifilm/富士 instax mini 25</span></td>
                <td class="price">640.60</td>
                <td class="count"><span class="reduce">-</span>
                    <input class="count-input" type="text" value="1"/>
                    <span class="add">+</span></td>
                <td class="subtotal">640.60</td>
                <td class="operation"><span class="delete">删除</span></td>
            </tr>
            </tbody>
        </table>
        <div class="foot" id="foot">
            <label class="fl select-all"><input type="checkbox" class="check-all check"/>&nbsp;&nbsp;全选</label>
            <a class="fl delete" id="deleteAll" href="javascript:;">删除</a>
            <div class="fr closing" onclick="getTotal();">结 算</div>
            <input type="hidden" id="cartTotalPrice"/>
            <div class="fr total">合计：￥<span id="priceTotal">0.00</span></div>
            <div class="fr selected" id="selected">已选商品<span id="selectedTotal">0</span>件<span
                    class="arrow up">︽</span><span class="arrow down">︾</span></div>
            <div class="selected-view">
                <div id="selectedViewList" class="clearfix">
                    <div><img src="t/images/images/1.jpg"><span>取消选择</span></div>
                </div>
                <span class="arrow">◆<span>◆</span></span></div>
        </div>
    </div>
    
    <script>

    // 添加事件
    
    var addList=document.getElementsByClassName("add");
    var countInp=document.getElementsByClassName("count-input")
    var sublist=document.getElementsByClassName("subtotal")
    var price=document.getElementsByClassName("price")
    var reducelist=document.getElementsByClassName("reduce")
    var deletelist=document.getElementsByClassName("delete")
    var checkall=document.getElementsByClassName("check-all")[0]
    var checkall_1=document.getElementsByClassName("check-all")[1]
    var checklist=document.getElementsByClassName("check-one")
    var pricetotal=document.getElementById("priceTotal")
    var deleteall=document.getElementById("deleteAll")
    var tbodycont=document.getElementsByTagName("tbody")[0]
    var trlist=tbodycont.getElementsByClassName("tr1");
    // add点击事件
    for(let i=0;i<addList.length;i++){
        // var countvalue=1
        addList[i].onclick=function(){ 
        countInp[i].value++
        sublist[i].innerHTML=(price[i].innerHTML*countInp[i].value).toFixed(2)
        }
    }
    // reduce点击事件
    for(let i=0;i<addList.length;i++){
        var countvalue=1
        reducelist[i].onclick=function(){
         countInp[i].value--
         if(countInp[i].value<1){
            countInp[i].value=1 
         }
        sublist[i].innerHTML=(price[i].innerHTML*countInp[i].value).toFixed(2)
        }
    }
    // 删除事件
    for(var i=0;i<deletelist.length;i++){
        deletelist[i].onclick=function(){
            this.parentElement.parentElement.remove()

            for(let i=0;i<addList.length;i++){
        // var countvalue=1
        addList[i].onclick=function(){ 
        countInp[i].value++
        sublist[i].innerHTML=(price[i].innerHTML*countInp[i].value).toFixed(2)
        }
    } 

        for(let i=0;i<addList.length;i++){
            var countvalue=1
            reducelist[i].onclick=function(){
            countInp[i].value--
            if(countInp[i].value<1){
                countInp[i].value=1 
            }
            sublist[i].innerHTML=(price[i].innerHTML*countInp[i].value).toFixed(2)
            }
        }       
        }
    }
    
    // 全选事件
    checkall.onclick=function() {
       var flag=checkall.checked
       for(var i=0;i<checklist.length;i++){
           checklist[i].checked=flag
       }
       if(flag){
        var allprice=0
       for(var j=0;j<sublist.length;j++){
           var subprice=Number(sublist[j].innerHTML).toFixed(2)
        //    console.log(allprice,subprice)
           allprice =(allprice*1+ subprice*1).toFixed(2) 
       }
       pricetotal.innerHTML =allprice 
    }
    else{
        pricetotal.innerHTML ="0.00" 
    }
    }
    // 单选事件
    for(var i=0;i<checklist.length;i++){
        checklist[i].onclick=function(){
            checkall.checked=false 
          var count=0
          for(var j=0;j<checklist.length;j++){
              if(checklist[j].checked){
              count++
            }
          }
          if(count==checklist.length){
              checkall.checked=true
          }
          var allprice="0.00"
          for(let j=0;j<checklist.length;j++){
              if(checklist[j].checked==true){
              allprice = (Number(allprice).toFixed(2)*1 + Number(sublist[j].innerHTML).toFixed(2)*1).toFixed(2)
              }
          }
        //   console.log(allprice)
          pricetotal.innerHTML =allprice      
    }
    }
    
    // 全选删除事件
    checkall_1.onclick=function() {
       var flag=checkall_1.checked
       for(var i=0;i<checklist.length;i++){
           checklist[i].checked=flag
       }
       if(flag){
        var allprice=0
       for(var j=0;j<sublist.length;j++){
           var subprice=Number(sublist[j].innerHTML).toFixed(2)
        //    console.log(allprice,subprice)
           allprice =(allprice*1+ subprice*1).toFixed(2) 
       }
       pricetotal.innerHTML =allprice 
    }
    else{
        pricetotal.innerHTML ="0.00" 
    }
    }

    deleteall.onclick=function(){     
        for(let i=0;i<trlist.length;i++){
          if(checklist[i].checked){
             trlist[i].remove()
             i=-1
          }
          else{
              continue
          }
        }
        if(checklist.length==0){
            pricetotal.innerHTML ="0.00"  
        }
    }
    </script>
</body>
</html>